<template>
  <div>

  <h3 align="center">用户管理</h3>
  <el-button type="primary" @click="add" size="mini">新增</el-button>
    <el-table :data="userList" style="width: 100%">

      <el-table-column label="编号">
        <!-- 插槽，和迭代变量一个意思-->
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.userId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户名">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="密码">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.userPwd }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

     <div class="block" style="">
       <!-- page-size 默认每页显示条数-->
        <el-pagination
          @size-change="selectPage"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="rows"
          :total="total"
          layout="total, prev, pager, next,jumper, sizes">
        </el-pagination>
      </div>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">

      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="用户名">
          <el-col :span="22">
            <input type="hidden" v-model="userForm.userId" />
            <el-input placeholder="请输入用户名" v-model="userForm.userName"></el-input>
          </el-col>

        </el-form-item>
        <el-form-item label="密码">
          <el-col :span="22">
            <el-input placeholder="请输入密码" v-model="userForm.userPwd"></el-input>
          </el-col>
        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    name: "userListEle",
    data() {
      return {
        userList: [],
        title: "新增", //模态框的标题
        userForm: { //表单请求对象
          userId: null,
          userName: "",
          userPwd: ""

        },
        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1, //当前页
        rows: 5, //每页显示条数,
        isShow: false
      }
    },
    methods: {
      loaddata() { //加载数据
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/user-info/pageList",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.userList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage
          }
        })
      },
      add() { //打开新增模态框
        //显示模态框
         this.isShow = true;
        //更改模态框的标题
        this.title = "新增";
        //清除表单元素
        this.userForm.userId = null;
        this.userForm.userName = "";
        this.userForm.userPwd = "";
      },
      update(x) { //打开修改模态框
        //显示模态框
        this.isShow = true;
        //更改模态框的标题
        this.title = "修改";
        console.log(x)
        //把选中的值赋值给模态框的表单元素
        this.userForm.userId = x.userId;
        this.userForm.userName = x.userName;
        this.userForm.userPwd = x.userPwd;

      },
      saveInfo() { //保存
        var url = ""
        if (this.title == "修改") {
          url = "http://localhost:8080/user-info/update"
        } else {
          url = "http://localhost:8080/user-info/add"
        }

        var mythis = this;
        $.ajax({
          url: url,
          type: "get",
          data: mythis.userForm,
          dataType: "json",
          success: function(data) {
            console.log(data)
            //alert(data.info);
            //mythis.$alert(data.info)
            mythis.$message(data.info)
            if (data.info == "新增成功" ||data.info == "修改成功") {
              //关闭模态框
              mythis.isShow = false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      delInfo(x) { //删除
        this.$confirm("你确定要删除数据吗?").then(function() {
          var mythis = this;
          $.ajax({
            url: "http://localhost:8080/user-info/del",
            type: "get",
            data: {
              "userId": x.userId
            },
            dataType: "json",
            success: function(data) {
              console.log(data)
              
              if (data.info == "删除成功") {
                //刷新
                mythis.$message(data.info)
                mythis.loaddata();
              }
            }
          })
        });

      },
      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },
      handleCurrentChange(v){//当前页触发事件
          this.curPage = v;
          this.loaddata();
      }
    },
    mounted() {
      this.loaddata();
      console.log(this.$route.query.info)
    }

  }
</script>

<style>
</style>
